<template>
  <nav>
    <router-link v-for="item in list" :key="item.id" :to="item.link">{{item.value}}</router-link>
  </nav>
</template>

<script>
import { ref, reactive } from 'vue';
export default {
    props: {
        
    },
    setup(props){
        let list = [
            { id: 1, value: '热门', link: '/' },
            { id: 2, value: '导购', link: '/daogou' },
            { id: 3, value: '测评', link: '/ceping' },
            { id: 4, value: '排行榜', link: '/rank' }
        ];
        list = reactive(list);
        return {
            list
        }
    }
}
</script>

<style lang="scss" scoped>
nav {
  display: inline-block;
  padding: 20px 30px 16px;
  border-bottom: 1px solid #f3f4f4;

  a {
    font-size: 20px;
    font-weight: bold;
    color: #959595;
    margin: 0 40px;
    text-decoration: none;

    &.router-link-exact-active {
      color: #000000;
    }
  }
}
</style>
